﻿@charset "utf-8";
@import "common/global";
@import "header";
@import "footer";

.circleProgress_wrapper {
    width: 2rem;
    height: 2rem;
    position: relative;
    @include transform(rotate(-135deg));

    .wrapper {
        width: 1rem;
        height: 2rem;
        position: absolute;
        top: 0;
        overflow: hidden;


        .circleProgress {
            width: 2rem;
            height: 2rem;
            border: .1rem solid transparent;
            border-radius: 50%;
            position: absolute;
            top: 0;
            @include transform(rotate(45deg));
        }

        .rightcircle {
            border-top: .1rem solid #ddd;
            border-right: .1rem solid #ddd;
            right: 0;
            @include animation(circleProgressLoad_right 3s forwards);
        }

        .circle60 {
            @include animation(circleProgressLoad_right60 3s forwards);
        }

        .circle90 {
            @include animation(circleProgressLoad_right90 3s forwards);
        }

        .circle145 {
            @include animation(circleProgressLoad_right145 3s forwards);
        }

        .circle180 {
            @include animation(circleProgressLoad_right180 3s forwards);
        }

        .leftcircle {
            border-bottom: .1rem solid #ddd;
            border-left: .1rem solid #ddd;
            left: 0;
            @include animation(circleProgressLoad_left 3s forwards);
        }

        .circle210 {
            @include animation(circleProgressLoad_left30 2s forwards);
        }

        @include keyframes(circleProgressLoad_right60) {
            50% {
                border-top: .1rem solid #ddd;
                border-right: .1rem solid #ddd;
                border-left: .1rem solid $diyColor;
                border-bottom: .1rem solid $diyColor;
                @include transform(rotate(105deg));
            }

            100% {
                border-left: .1rem solid $diyColor;
                border-bottom: .1rem solid $diyColor;
                @include transform(rotate(105deg));
            }
        }

        @include keyframes(circleProgressLoad_right90) {
            50% {
                border-top: .1rem solid #ddd;
                border-right: .1rem solid #ddd;
                border-left: .1rem solid $diyColor;
                border-bottom: .1rem solid $diyColor;
                @include transform(rotate(135deg));
            }

            100% {
                border-left: .1rem solid $diyColor;
                border-bottom: .1rem solid $diyColor;
                @include transform(rotate(135deg));
            }
        }

        @include keyframes(circleProgressLoad_right145) {
            50% {
                border-top: .1rem solid #ddd;
                border-right: .1rem solid #ddd;
                border-left: .1rem solid $diyColor;
                border-bottom: .1rem solid $diyColor;
                @include transform(rotate(190deg));
            }

            100% {
                border-left: .1rem solid $diyColor;
                border-bottom: .1rem solid $diyColor;
                @include transform(rotate(190deg));
            }
        }

        @include keyframes(circleProgressLoad_right180) {
            50% {
                border-top: .1rem solid #ddd;
                border-right: .1rem solid #ddd;
                border-left: .1rem solid $diyColor;
                border-bottom: .1rem solid $diyColor;
                @include transform(rotate(225deg));
            }

            100% {
                border-left: .1rem solid $diyColor;
                border-bottom: .1rem solid $diyColor;
                @include transform(rotate(225deg));
            }
        }

        @include keyframes(circleProgressLoad_left30) {
            65% {
                border-bottom: .1rem solid #ddd;
                border-left: .1rem solid #ddd;
                border-top: .1rem solid $diyColor;
                border-right: .1rem solid $diyColor;
                @include transform(rotate(45deg));
            }

            100% {
                border-top: .1rem solid $diyColor;
                border-right: .1rem solid $diyColor;
                border-bottom: .1rem solid #ddd;
                border-left: .1rem solid #ddd;
                @include transform(rotate(75deg));
            }
        }

        @include keyframes(circleProgressLoad_left) {
            /*50% {
                border-bottom: .1rem solid #ddd;
                border-left: .1rem solid #ddd;
                border-top: .1rem solid $diyColor;
                border-right: .1rem solid $diyColor;
                @include transform(rotate(45deg));
           }
            100% {
                border-top: .1rem solid $diyColor;
                border-right: .1rem solid $diyColor;
                border-bottom: .1rem solid $diyColor;
                border-left: .1rem solid $diyColor;
                @include transform(rotate(225deg));
            }*/
        }
    }

    .right {
        right: 0;
    }

    .left {
        left: 0;
    }
}
